<template>
  <div>
    <div class="about-us-content">
      <div class="content">
        <div class="tip">
          <div>
            <el-button @click="toContent('content')" type="text">跳转-填写英文内容</el-button>
            需要编辑中英两版内容，英文内容编辑请往下拉（如留空英文内容，默认会用中文内容代替）
          </div>
        </div>
        <h2>首页简介</h2>
        <!-- <div id="home">
          <el-form size="small" label-width="80px">
            <el-form-item label="设置">
              <label>展示内容</label>
              <el-switch v-model="activateItem.homeDisplay">
              </el-switch>
              <el-input style="width: 120px;margin: 0px 10px;" v-model="activateItem.icon" placeholder="图标"></el-input>
              <el-link type="primary" target="_blank" href="https://fontawesome.dashgame.com/">图标网站 FontaWesome</el-link>
            </el-form-item>
          </el-form>
        </div> -->
        <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="activateItem.homeContent" maxlength="300"
          show-word-limit>
        </el-input>
        <h2>内容</h2>
        <div style="border: 1px solid #ccc;">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :mode="mode" />
          <Editor style="height: 700px; overflow-y: hidden;" v-model="activateItem.content" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="onCreated" />
        </div>
        <h2>Homepage Brief Introduction</h2>
        <el-input type="textarea" :rows="8" placeholder="Please enter the content" v-model="activateItem.homeContentEn"
          maxlength="600" show-word-limit>
        </el-input>
        <h2>Content</h2>
        <div id="content" style="border: 1px solid #ccc;">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorEn" :mode="mode" />
          <Editor style="height: 700px; overflow-y: hidden;" v-model="activateItem.contentEn"
            :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreatedEn" />
        </div>
      </div>
      <div class="fix-buttons">
        <div class="button-group">
          <el-button size="small" type="primary" @click="saveAboutUs"><i class="el-icon-check"></i> 提交保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AdminContainer from '@/components/Admin/AdminContainer.vue';
import * as aboutUsApi from '@/api/admin/aboutUsApi';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css';
import * as storage from '@/utils/localStorageUtil';

export default {
  components: {
    AdminContainer,
    Editor,
    Toolbar
  },
  data () {
    return {
      aboutUsList: [],
      activateItem: {
        id: null,
        content: "",
        title: "",
        contentEn: "",
        icon: "",
        homeContent: "",
        homeContentEn: "",
        homeDisplay: false,
      },
      editor: null,
      editorEn: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadVideo: {
            server: process.env.API_ROOT + '/api/admin/AboutUs/UploadMedia',
            fieldName: "mediaFile",
            maxNumberOfFiles: 1,
            maxFileSize: 6 * 1024 * 1024,
            headers: {
              Authorization: storage.getLocalStorage('francis:jwt')
            },
          },
          uploadImage: {
            server: process.env.API_ROOT + '/api/admin/AboutUs/UploadMedia',
            fieldName: 'mediaFile',
            maxFileSize: 6 * 1024 * 1024,
            maxNumberOfFiles: 1,
            headers: {
              Authorization: storage.getLocalStorage('francis:jwt')
            },
          }
        },
      },
      mode: 'default',
    }
  },
  methods: {
    getAllAboutUs () {
      var self = this;
      aboutUsApi.getAllAboutUs()
        .then(res => {
          if (res.code == 200) {
            self.aboutUsList = res.data;
            if (self.aboutUsList.length > 0) {
              self.activateItem = self.aboutUsList[0];
            }
          } else if (res.code == 500) {
            self.$message.error(res.exception);
          }
        })
        .catch(err => {
          self.$message.error('接口发生错误');
        });
    },
    getAboutUsById () {
      aboutUsApi.getAboutUsById(this.activateItem.id)
        .then(res => {
          if (res.code == 200) {
            this.activateItem = res.data;
          }
          else if (res.code == 500) {
            this.$message.error(res.exception);
          }
        })
    },
    toggleItem (item) {
      var self = this;
      self.$confirm('请确认内容已经保存, 是否继续切换?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (item.content == null) {
          item.content = "";
        }
        self.activateItem = item;
      });
    },
    onCreated (editor) {
      this.editor = Object.seal(editor);
    },
    onCreatedEn (editor) {
      this.editorEn = Object.seal(editor);
    },
    saveAboutUs () {
      var self = this;
      aboutUsApi.updateAboutUsContent(self.activateItem)
        .then(res => {
          if (res.code == 200) {
            self.$message({
              message: '保存成功',
              type: 'success'
            });
          }
          else if (res.code == 500) {
            self.$message.error('接口发生错误');
          }
        })
        .catch(err => {
          self.$message.error('接口发生错误');
        })
    },
    toContent (id) {
      document.getElementById(id).scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "nearest"
      });
    }
  },
  mounted () {
    var self = this;
    if (self.$route.query.id != null) {
      self.activateItem.id = parseInt(self.$route.query.id);
      self.getAboutUsById();
    }
    // self.getAllAboutUs();
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style scoped>
.aboutUs-form {
  padding: 45px 5%;
}

.tabs {
  top: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  background: #fff;
  height: 100%;
  border: 1px solid #E4E7ED;
  width: 200px;
  box-sizing: border-box;
  padding: 20px 0px;
  z-index: 1;
}

.tabs ul {
  padding: 0;
  list-style: none;
  margin: 0px;
}

.tabs ul li {
  text-align: center;
  font-size: 15px;
  line-height: 50px;
  color: #303133;
  cursor: pointer;
}

.tabs ul li:hover {
  color: #409EFF;
}

.tabs ul .activate {
  background-color: #ecf5ff;
  color: #409EFF;
}

.about-us-content {
  box-sizing: border-box;
}

.about-us-content .content {
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 80px;
}

.about-us-content h2 {
  font-weight: 400;
  color: #1f2f3d;
  font-size: 28px;
  margin: 20px 0px;
}

.tip {
  padding: 0px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  color: #5e6d82;
  line-height: 32px;
  font-size: 14px;
}

.tip div {
  line-height: 15px;
}

.fix-buttons {
  position: fixed;
  bottom: 0px;
  left: 200px;
  right: 0px;
}

.button-group {
  text-align: center;
  padding: 15px 0px;
  border-top: 1px solid #EBEEF5;
  background: #f7f8fa;
}

#home {
  background-color: #f7f8fa;
  padding: 10px;
  border: 1px solid #DCDFE6;
  padding-top: 25px;
  margin-bottom: 10px;
}
</style>